<template>
  <div class="netpage">
    <div class="select">
      <el-select v-model="currentOpt" :popper-append-to-body="false">
        <el-option
          v-for="(value, index) of selectOptions"
          :key="index"
          :label="value"
          :value="value"
        ></el-option>
      </el-select>
    </div>
    <div class="leftlist">
      <div
        class="leftitem first"
        v-for="(leftitem, leftindex) in leftDataList"
        :key="leftindex"
      >
        <p class="itemititle">{{ leftitem.field_name }}</p>
        <p>
          <b>{{ leftitem.field_value }}</b
          >{{ leftindex === 0 ? "个" : leftindex === 1 ? "人" : "万件" }}
        </p>
        <p class="percent" v-if="leftitem.field_value1">
          办结率&nbsp;<span
            ><b :class="{ downicon: leftitem.field_value1 < 0 }">{{
              leftitem.field_value1
            }}</b></span
          >
        </p>
      </div>
    </div>
    <div class="rightchart">
      <div class="charttitle">网格事件排名TOP5</div>
      <div class="chartarea">
        <div class="mychart" ref="myChart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { postAction, getAction } from '@/api/manage.js'

export default {
  data() {
    return {
      leftDataList: [],
      currentOpt: '本月',
      selectOptions: ['本月', '本年', '累计'],
      myChart: null,
      chartData: []
    }
  },
  watch: {
    currentOpt() {
      this.getChartData()
    }
  },
  mounted() {
    this.getData()
    this.getChartData()
  },
  methods: {
    getData() {
      postAction('/topic/data/listAllData/dy_dp_shzl_wgyx_gk', {}).then(
        (res) => {
          if (res.result && res.result.data) {
            this.leftDataList = res.result.data
          }
        }
      )
    },
    getChartData() {
      getAction('/topic/data/listAllBySql/dy_dp_shzl_wgyx_wgsj_top5', {
        count_type: this.currentOpt
      }).then((res) => {
        if (res.result) {
          this.chartData = res.result
          this.initChart()
        }
      })
    },
    initChart() {
      if (!this.myChart) {
        this.myChart = echarts.init(this.$refs.myChart)
      }
      let xAxisData = []
      let yAxissbData = []
      let yAxisbjData = []
      this.chartData.forEach((item) => {
        xAxisData.push(item.name)
        yAxissbData.push(item.report_Num)
        yAxisbjData.push(item.finish_num)
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          show: true,
          x: 'center', // 设置图例水平位置为居中
          y: 'top', // 设置图例垂直位置为底部
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          top: '30%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#e1e1e1'
              }
            },
            axisLabel: {
              interval: 0,
              margin: 10,
              textStyle: {
                fontSize: 12,
                color: '#e1e1e1'
              }
              // rotate: '45',
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：件',
            nameTextStyle: {
              // 轴标题，在xAxis或yAxis根下
              color: '#e1e1e1',
              fontSize: 12
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                fontSize: 12,
                color: '#e1e1e1'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            splitLine: {
              lineStyle: {
                type: 'solid',
                color: 'rgba(255,255,255,0.3)'
              }
            }
          }
        ],
        series: [
          {
            name: '上报数',
            type: 'bar',
            barWidth: '12',
            data: yAxissbData,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, // 前四个参数定义了渐变色的起止位置
                  [
                    { offset: 0, color: 'rgba(0, 193, 255, 1)' }, // 渐变开始的颜色和位置
                    { offset: 1, color: 'rgba(150, 209, 228, 1)' } // 渐变结束的颜色和位置 // 渐变结束的颜色和位置
                  ]
                )
              }
            }
          },
          {
            name: '办结数',
            type: 'bar',
            barWidth: '12',
            data: yAxisbjData,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, // 前四个参数定义了渐变色的起止位置
                  [
                    { offset: 0, color: 'rgba(173, 232, 204, 1)' }, // 渐变开始的颜色和位置
                    { offset: 1, color: 'rgba(81, 255, 174, 1)' } // 渐变结束的颜色和位置
                  ]
                )
              }
            }
          }
        ]
      }
      this.myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.netpage {
  width: 100%;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  .select {
    width: 70px;
    height: 20px;
    position: absolute;
    top: 13px;
    right: 10px;
    z-index: 999;
    border-radius: 4px;
    // border: 1px solid #609ef2;
    ::v-deep .el-select {
      width: 100%;
      .el-input {
        input {
          width: 100%;
          height: 20px;
          font-size: 12px;
          padding-right: 8px;
          color: #fff;
          background: transparent;

          //   font-family: Source Han Sans CN;
          //   color: hsla(222, 72%, 72%, 1);
          border: 1px solid #3e8bf2;
          //   background: rgba(255, 255, 255, 1);
          //   border-radius: 12px;
          position: relative;
        }
      }

      .el-input__suffix {
        height: auto;
        right: 5px;
        top: -8px;
      }

      .el-select-dropdown {
        // border-color: rgba(255, 255, 255, 0.4);
        background-color: #4e83d1;
        border-radius: 4px;
        // width: 100px;
        position: absolute !important;
        left: 0 !important;
        .el-select-dropdown__item {
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: white;
        }
        .el-select-dropdown__item.selected,
        .el-select-dropdown__item:hover {
          color: rgba(5, 70, 152, 0.6);
          background: rgba(0, 255, 255, 1);
        }
        .hover {
          background-color: transparent;
        }
      }
      .el-icon-arrow-up:before {
        content: "\e78f";
        color: #3e8bf2;
        font-size: 14px;
      }
    }
  }
  .leftlist {
    width: 103px;
    margin-right: 10px;
    .leftitem {
      width: 100%;
      height: 59px;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: url("../../images/netbg1.png") no-repeat center;
      background-size: 100% 100%;
      &:last-child {
        height: 81px;
        margin-bottom: 0;
        background: url("../../images/netbg2.png") no-repeat center;
        background-size: 100% 100%;
      }
      p {
        font-family: MicrosoftYaHei;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin-bottom: 5px;
        b {
          font-family: MicrosoftYaHei, MicrosoftYaHei;
          font-weight: bold;
          font-size: 20px;
          color: #ffde00;
          line-height: 0px;
          text-align: right;
          font-style: normal;
          text-transform: none;
        }
        &.percent {
          font-size: 14px;
          span {
            color: #ff3e3e;
            b {
              color: #ff3e3e;
              padding-left: 10px;
              box-sizing: border-box;
              position: relative;
              &::before {
                content: "";
                width: 8px;
                height: 12px;
                background: url("../../images/up-arrow.png") no-repeat;
                background-size: 100% 100%;
                position: absolute;
                left: 0;
                top: 50%;
                margin-top: -4px;
              }
              &.downicon {
                color: #18c624;
                &::before {
                  content: "";
                  width: 8px;
                  height: 12px;
                  background: url("../../images/down-arrow.png") no-repeat;
                  background-size: 100% 100%;
                  position: absolute;
                  left: 0;
                  top: 50%;
                  margin-top: -4px;
                }
              }
            }
          }
        }
      }
    }
  }
  .rightchart {
    width: 280px;
    .charttitle {
      width: 280px;
      height: 29px;
      font-family: MicrosoftYaHei;
      font-size: 16px;
      color: #ffffff;
      line-height: 29px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      padding: 0 15px;
      box-sizing: border-box;
      background: url("../../images/titlebg.png") no-repeat center;
      background-size: 100% 100%;
    }
    .chartarea {
      width: 100%;
      height: 200px;
      margin-top: 10px;
      .mychart {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
